<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>游戏支付</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="__CSS__/ydui.css"/>
    <link rel="stylesheet" href="__CSS__/app.css"/>
    <script src="__JS__/ydui.flexible.js"></script>
    <style>
        .top{
            background-color:#fff;
            padding:0 0.3rem;
            font-family:微软雅黑;
            font-weight:bold;
            border-bottom:1px #ddd solid;
            margin-bottom:0.2rem;
        }
        .top p{
            padding:0.4rem 0;
            font-size:0.28rem;
            color:#999;
            border-bottom:1px #ddd solid;

        }
        .top p span{
            float: right;
            font-size:0.3rem;
            color:#333;
        }
        p.money{
            font-size:0.3rem;
            color:#333;
            border-bottom:none;
        }
        p.money span{
            font-size:0.4rem;
            color:#e00;
        }

        #h5_pay{
            background:#fff;
            border-bottom:1px #ddd solid;
            border-top:1px #ddd solid;
            padding:0 0.3rem;
        }
        #h5_pay div{
            padding:0.4rem 0;
            font-size:0.24rem;
            color:#666;
        }
        #h5_pay div span{
            color:#e70000;
            font-size:0.2rem;
            float: right;
        }
        #h5_pay div .info{
            display:inline-block;
            border:none;
            padding:0;
            margin-left:0.2rem;
            font-size:0.3rem;
            color:#333;
        }
        #h5_pay div .info p{
            padding-top: 0.04rem;
            font-size:0.2rem;
            color:#888;
        }
        #wxpay,#alipay{
            background:url('__IMG__/arrows.png') no-repeat 97% center;
            background-size:0.24rem 0.24rem;
        }
        #h5_pay div img{
            display:inline-block;
            width:0.7rem;
            height:0.7rem;
            float:left;
        }
        .boot{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
            background:url('__IMG__/Boot.jpg');
            background-size:100%;
        }
    </style>
</head>
<body>
<div class="top">
        <p>用户ID<span>545646542</span></p>
        <!--<p>订单编号<span>46546146565</span></p>-->
        <p>商品名称<span>10元宝</span></p>
        <p class="money">需付金额 <span>6元</span></p>
</div>
<div id="h5_pay" data-value="" >
    <div style="border-bottom:1px #ddd solid;" id="wxpay"><img src='__IMG__/wechat.png' /><div class="info">微信支付<p>使用微信支付，安全便捷</p></div></div>
    <div id="alipay"><img src='__IMG__/alipay.png' /><div class="info">支付宝支付<p>使用支付宝支付，安全便捷</p></div></div>
</div>
<if condition="$is_wx == 1">
<div class="boot">
</div>
    </if>
</body>
<!-- 引入jQuery 2.0+ -->
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入YDUI脚本 -->
<script src="__JS__/ydui.js"></script>
<script>
    var is_wx = '{$is_wx}';
    $(function(){
        console.log('{$obj}');
        var obj = JSON.parse('{$obj}');

        if(typeof(obj.extra) != 'undefined'){
            obj.extra = encodeURIComponent(obj.extra);
        }
        console.log(obj);
        var gparams = JSON.parse(obj.gparams);
        var top = $('.top p span');
        top.eq(0).html(obj.player_id);
        top.eq(1).html(obj.paytitle);
        top.eq(2).html(obj.pay/100+'元');
        $('#alipay').click(function(){
            obj.payType = 'ZWAP';
            pay(obj);
        });

        $('#wxpay').click(function(){
            obj.payType = 'WWAP';
            pay(obj);
        })
    });

    function pay(obj) {
        console.log(obj);
        $.ajax({
            url: '{:U("Public/pay")}',
            type: 'post',
            data: obj,
            success: function (res) {console.log(res);
                if(res.status){
                    window.location.href= res.url;
                    if (pay_status != ''){clearInterval(pay_status)};
                    pay_status = setInterval('payStatus('+res.trade_no+')',1000);

                }
            }, error: function (ex) {
                alert('网络错误！');
            }
        });
    }
    function payStatus(trade_no){
            console.log(trade_no);
            $.post('{:U("Public/pay_status")}',{'trade_no':trade_no},function(res){
                if(res.status){
                    clearInterval(pay_status);
                    alert('支付成功,请返回微信查看');
                }
            })
        }
</script>
</html>
